<template>
<div>
    <el-table :data="tableData" :filter-method="filterHandler" style="width: 100%;text-align: center;"  :row-class-name="tableRowClassName">

        <el-table-column prop="id" label="序号" width="50"></el-table-column>
        <el-table-column prop="name" label="名称" width="100"></el-table-column>
        <el-table-column prop="number" label="序列号" width="130"></el-table-column>
        <el-table-column prop="slot" label="插件" width="130"></el-table-column>

        <el-table-column prop="status" label="状态" width="80" column-key="status" :filters="tableStatus" :filter-method="filterTag" filter-placement="bottom-end" :formatter="formatter">
            <template slot-scope="scope">
                <el-tag disable-transitions>{{scope.row.status}}</el-tag>
            </template>
        </el-table-column>

        <el-table-column prop="day" label="时间" width="130"></el-table-column>
        <el-table-column prop="jiekou" label="接口" width="130"></el-table-column>
        <el-table-column prop="date" label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">离线</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div>
      <el-pagination background layout="prev, pager, next" :total="100">
    </el-pagination>
        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple">设备总数</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">23</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">在线设备</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">10</div>
            </el-col>
        </el-row>
    </div>
</div>
</template>

<style>
.el-pagination{
  display: block;
  margin-left: 30%;
}
.el-table .warning-row {
    background: oldlace;
    text-align: center;
}

.el-table .success-row {
    background: #f0f9eb;
    text-align: center;
}

.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}
</style>

<script>
export default {
    methods: {
        formatter(row, column) {
            return row.address;
        },
        filterTag(value, row) {
            return row.tag === value;
        },
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        tableRowClassName({
            row,
            rowIndex
        }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        }
    },
    filters: {
        formatStatus(val) {
            return val == 0 ? '在线' : val == 1 ? '离线' : '离线'
        },
    },

    data() {
        return {
            tableData: [{
                    id: '1',
                    name: '湿度采集器',
                    number: 'FK243244',
                    slot: 'ShellJunk',
                    status: 0,
                    day: '2019.4.3',
                    jiekou: '串口',
                },
                {
                    id: '2',
                    name: '湿度采集器',
                    number: 'FK243244',
                    slot: 'ShellJunk',
                    status: '1',
                    day: '2019.4.3',
                    jiekou: '串口',
                },
                {
                    id: '3',
                    name: '湿度采集器',
                    number: 'FK243244',
                    slot: 'ShellJunk',
                    status: '0',
                    day: '2019.4.3',
                    jiekou: '串口',
                },
                {
                    id: '4',
                    name: '湿度采集器',
                    number: 'FK243244',
                    slot: 'ShellJunk',
                    status: '1',
                    day: '2019.4.3',
                    jiekou: '串口',
                },
                {
                    id: '5',
                    name: '湿度采集器',
                    number: 'FK243244',
                    slot: 'ShellJunk',
                    status: '0',
                    day: '2019.4.3',
                    jiekou: '串口',
                },
                  {
                    id: '5',
                    name: '湿度采集器',
                    number: 'FK243244',
                    slot: 'ShellJunk',
                    status: '0',
                    day: '2019.4.3',
                    jiekou: '串口',
                },
                  {
                    id: '5',
                    name: '湿度采集器',
                    number: 'FK243244',
                    slot: 'ShellJunk',
                    status: '0',
                    day: '2019.4.3',
                    jiekou: '串口',
                },
                  {
                    id: '5',
                    name: '湿度采集器',
                    number: 'FK243244',
                    slot: 'ShellJunk',
                    status: '0',
                    day: '2019.4.3',
                    jiekou: '串口',
                },
                
            ],
            tableStatus: [{
                text: '在线',
                value: '0'
            }, {
                text: '离线',
                value: '1'
            }],
        }
    }
}
</script>
